<template>
<div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        {{ $t('table.add') }}
      </el-button>
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        {{ $t('table.export') }}
      </el-button>
      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        {{ $t('table.reviewer') }}
      </el-checkbox>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column :label="$t('lb.CommodityId')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lb.CommodityName')" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.commodityName  }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lb.CommoditySaleBegin')" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{ row.commoditySaleBegin }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lb.CommoditySalePrice')" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.commoditySalePrice }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lb.CommodityDescription')" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.commodityDescription }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lb.CommodityState')" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.commodityState }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lb.CommodityImage')" width="300px" align="center">
        <template slot-scope="{row}">
          <img :src="row.commodityImage" width="300" height="170">
        </template>
      </el-table-column>
      <el-table-column :label="$t('lb.CommodTypeId')" width="110px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.commodTypeId }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
        <template slot-scope="{row}">
          <span style="color:red;">{{ row.reviewer }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.importance')" width="80px">
        <template slot-scope="{row}">
          <svg-icon v-for="n in +row.importance" :key="n" icon-class="star" class="meta-item__icon" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.readings')" align="center" width="95">
        <template slot-scope="{row}">
          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            {{ $t('table.edit') }}
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
            {{ $t('table.delete') }}
          </el-button>
          <el-button  size="mini"  @click="SkuAdd(row,$index)">
            设置sku
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page"  :size-change="handleSizeChange" :page-sizes="[3, 4, 5, 6]" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="商品名称" prop="commodityName">
          <el-input  v-model="temp.commodityName" />
        </el-form-item>
        <el-form-item label="购买时间" prop="commoditySaleBegin">
          <el-date-picker v-model="temp.commoditySaleBegin" type="datetime" placeholder="Please pick a date" />
        </el-form-item>
        <el-form-item label="价格" prop="commoditySalePrice">
          <el-input type="number" v-model="temp.commoditySalePrice" />
        </el-form-item>
        <el-form-item label="商品详情" prop="commodityDescription">
          <el-input  v-model="temp.commodityDescription" />
        </el-form-item>
        <el-form-item label="上架数量" prop="coommodityStock">
          <el-input  v-model="temp.coommodityStock" />
        </el-form-item>
        <el-form-item label="商品状态" prop="commodityState">
          <el-input type="number" v-model="temp.commodityState" />
        </el-form-item>
        <el-form-item label="商品类型" prop="commodTypeId">
          <!-- <el-input  v-model="temp.commodTypeId" /> -->
           <el-select
      v-model="temp.commodTypeId"
      placeholder="请选择类别"
      :style="{width:'100%'}">
       <el-option
      v-for="(item,index) in options"
      :key="index"
      :label="item.commodTypeName"
      :value="item.commodTypeName"
      >
      </el-option>
      </el-select>
        </el-form-item>
        <el-form-item label="添加图片" prop="commodityImage">
         <el-upload
  class="upload-demo"
  ref="upload"
  action="https://localhost:44341/api/app/free-action/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="onsuccess"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
</el-upload>
        </el-form-item>
      </el-form>
  
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>
<!-- sku弹窗 -->
<el-dialog title="Sku设置" :visible.sync="dialogSKU">
<!-- sku基础模板设置 -->
  <el-form :inline="true"  >
    <el-form-item label="基础模板">
  <el-select v-model="SkuSelect" filterable multiple placeholder="请选择">
    <el-option
      v-for="item in Skuoptions"
      :key="item.commodSpeciName"
      :label="item.commodSpeciName"
      :value="item.commodSpeciOrder">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item >
    <el-button   @click="selecInser"   icon="el-icon-download" circle></el-button>
  </el-form-item>
</el-form>
<el-form :inline="true"  >
  <el-form-item label="名称">
    <el-input  placeholder="添加名称" v-model="skumadd" /> 
  </el-form-item>
 <el-form-item >
    <el-button   @click="addTheme"  icon="el-icon-plus"  circle></el-button>
  </el-form-item>
  <el-form-item >
    <el-button   @click="deleteTheme"  type="danger" icon="el-icon-delete" circle></el-button>
  </el-form-item>
  <el-form-item >
    <el-button type="success"  @click="switchTheme" icon="el-icon-s-data" circle></el-button>
  </el-form-item>
</el-form>
<div>
		<SkuForm
    ref="skuForm"
    async
			:source-attribute="sourceAttribute"
			:attribute.sync="attribute"
			:sku.sync="sku"
			:theme="theme"
		/>
		
		<el-row type="flex" :gutter="20">
			<el-col>
				<el-divider content-position="left">attribute 数据</el-divider>
				<pre><code>{{ attribute }}</code></pre>
			</el-col>
			<el-col>
				<el-divider content-position="left">sku 数据</el-divider>
				<pre><code>{{ sku }}</code></pre>
			</el-col>
		</el-row>
    
	</div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSKU = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary" @click="Addsku()">
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { GetSkuUpEx,SkuUpload,fetchList, fetchPv, createArticle, updateArticle,deleteArticle } from '@/api/lb'

import { fetchList1 } from '@/api/Specifica'
import { fetchListty } from '@/api/CType'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import SkuForm from 'vue-sku-form'

const calendarTypeOptions = [
  { key: 0, display_name: '未定义' },
  { key: 1, display_name: '冒险' },
  { key: 2, display_name: '传记' },
  { key: 3, display_name: '反乌托邦' },
  { key: 4, display_name: '奇幻' },
  { key: 5, display_name: '恐怖' },
  { key: 6, display_name: '科学' },
  { key: 7, display_name: '科幻小说' },
  { key: 8, display_name: '诗词' },
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  name: 'ComplexTable',
  components: { Pagination,SkuForm },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  data() {
    return {
      SkuUp:{commodid:"",SkuUp1:[],SkuUp2:[]},
      SkuSelect:[],
      Skuoptions:{},
      SKURefresh:true,
      skumadd:"",
      sourceAttribute: [
				{
					name: '颜色',
					item: ['黑', '金', '白']
				},
				{
					name: '内存',
					item: ['16G', '32G']
				},
        {
          name: '材质',
					item: []
        }
			],
			attribute: [],
			sku: [],
			theme: 1,
      dialogSKU:false,
      options:[],
       fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 3,
        SkipCount: 1,
        MaxResultCount: 3,
        IsDeleted:1
      },
      importanceOptions: [1, 2, 3],
      calendarTypeOptions,
      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
      statusOptions: ['published', 'draft', 'deleted'],
      showReviewer: false,
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
     
      this.listLoading = true
       this.listQuery.SkipCount=(this.listQuery.page-1)*this.listQuery.limit 
       console.log(this.listQuery);
      console.log(this.total);
      fetchList(this.listQuery).then(response => {
        console.log(response)
        this.list = response.items
        this.total = response.totalCount
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.1 * 1000)
      })
    },
    handleSizeChange(val)
    {
      alert(val);
      console.log(val);
          this.listQuery.MaxResultCount=val;
          this.getList();
    },
    handleFilter() {
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id'
      } else {
        this.listQuery.sort = '-id'
      }
      this.handleFilter()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        status: 'published',
        type: ''
      }
    },
    handleCreate() {
        fetchListty().then(res => {
            this.list.unshift(this.temp)
            this.options=res.items
            this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
          })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          this.temp.author = 'vue-element-admin'
          this.submitUpload();
          this.onsuccess();
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          updateArticle(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleDelete(row, index) {

row.CommodityState=0;
updateArticle(row).then((k) => {
          
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
      })
      this.list.splice(index, 1)
    },
    handleFetchPv(pv) {
      fetchPv(pv).then(response => {
        this.pvData = response.data.pvData
        this.dialogPvVisible = true
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    getSortClass: function(key) { 
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },
      submitUpload() {
        console.log(this.fileList);
        this.$refs.upload.submit();
        
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      onsuccess:function(respones,file,fileList)
    {
      
          console.log(file.name);
          console.log(fileList);
          
        this.temp.commodityImage='http://localhost:100/'+file.name;
         
        console.log(this.temp);
         
          createArticle(this.temp).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
    },
    handleChange(value) {
        console.log(value);
      },
      /* 开启Sku弹窗 */
      SkuAdd(row,index)
      {
       this.dialogSKU=true;
       this.SkuUp.commodid=row.id;
        
        
        GetSkuUpEx(row.id).then(response => {
          console.log(response);
          var k=0;
          if(response.skuUp1!=null)
          {
                k=1;
          }
        if(k==1)
        {
this.loading=true;
          setTimeout(() => {
					this.sourceAttribute = response.skuUp1;
					setTimeout(() => {
						this.attribute = response.skuUp1;
						setTimeout(() => {
							this.sku = response.skuUp2;
							// 切记，必须在 attribute、sku 数据都加载后再执行 init() 方法
							this.$refs.skuForm.init()
							this.loading = false
						}, 300)
					}, 300)
				}, 300)
this.GetSkuList();
        }else
        {
          
          this.loading=true;
          setTimeout(() => {
					this.sourceAttribute = [
				{
					name: '默认',
					item: []
				},
				
			]
					setTimeout(() => {
						this.attribute = [];
						setTimeout(() => {
							this.sku = [];
							// 切记，必须在 attribute、sku 数据都加载后再执行 init() 方法
							this.$refs.skuForm.init()
							this.loading = false
						}, 300)
					}, 300)
				}, 300)
        this.GetSkuList();
        }
        
      })


          
        
          
          
      },
      switchTheme() {
			this.theme = this.theme == 1 ? 2 : 1
		},
    addTheme()
    {
this.sourceAttribute.push({name: this.skumadd, item:[]})
      this.loading=true;
          setTimeout(() => {
					this.sourceAttribute = this.sourceAttribute
					setTimeout(() => {
						this.attribute = this.attribute
						setTimeout(() => {
							this.sku = this.sku
							// 切记，必须在 attribute、sku 数据都加载后再执行 init() 方法
							this.$refs.skuForm.init()
							this.loading = false
						}, 300)
					}, 300)
				}, 300)

      console.log(this.sourceAttribute);
        this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
    },
    deleteTheme()
    {
      console.log(this.sourceAttribute.length);
this.sourceAttribute.splice(this.sourceAttribute.length-1,1);
      this.loading=true;
          setTimeout(() => {
					this.sourceAttribute = this.sourceAttribute
					setTimeout(() => {
						this.attribute = this.attribute
						setTimeout(() => {
							this.sku = this.sku
							// 切记，必须在 attribute、sku 数据都加载后再执行 init() 方法
							this.$refs.skuForm.init()
							this.loading = false
						}, 300)
					}, 300)
				}, 300)
      console.log(this.sourceAttribute);
        this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'danger',
              duration: 2000
            })
    },
    GetSkuList()
      {
fetchList1().then(response => {
        console.log(response)
        this.Skuoptions = response.items;
      })
      },
      selecInser()
      {
console.log(this.Skuoptions);
        console.log(this.SkuSelect);
  
          for(var y=0;y<this.SkuSelect.length;y++)
          {
                var sldl={name:"",item:[]}
                for(var i=0;i<this.Skuoptions.length;i++)
                {
                      if(this.SkuSelect[y]==this.Skuoptions[i].commodSpeciOrder)
                      {
                        sldl.name=this.Skuoptions[i].commodSpeciName;
                      }
                }
                let compy=this.SkuSelect[y].split(",");
                sldl.item=compy;
            this.sourceAttribute.push(sldl);
                
this.loading=true;
          setTimeout(() => {
					this.sourceAttribute = this.sourceAttribute
					setTimeout(() => {
						this.attribute = this.attribute
						setTimeout(() => {
							this.sku = this.sku
							// 切记，必须在 attribute、sku 数据都加载后再执行 init() 方法
							this.$refs.skuForm.init()
							this.loading = false
						}, 300)
					}, 300)
				}, 300)
      }
      },
      Addsku()
      {

        console.log(this.SkuUp.commodid);
         this.SkuUp.SkuUp1=this.attribute;
        this.SkuUp.SkuUp2=this.sku;
        console.log(this.SkuUp);
        SkuUpload(this.SkuUp).then(response => {
        console.log(response);
        this.dialogSKU=false;
        this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
      })

        



      }
  },
  
}
</script>
